/**
 * Created by MingIr on 2017/1/18.
 * @author:bjzhang
 */

import React,{ Component } from 'react';
import {
    View,
    ScrollView,
    StyleSheet,
    Text,
    TouchableHighlight,
    Image,
    Dimensions,
    TouchableOpacity
} from 'react-native';

import PHead from '../module/header';
import { common } from  '../module/common';
import renderIf from '../module/renderIf';
import Toast from "react-native-root-toast";

const WINDOW_DIMENSIONS = Dimensions.get('window');

export default class JoinNewEvent extends Component{
    constructor(props){
        super(props);
        this.state = {
            eventInfo :{ id:0, title:'', cover:require('../../image/default.jpg'), thumb:'', content:'', file:'', price:0, state:0, address:'' },
            isDisable:false
        };
    }
    close(){
        this.props.navigation.goBack();
    }
    payEvent(){
        let that = this;
        that.setState({isDisable:true});
        // 获取用户的位置坐标，发送活动箱子
        common.getLocation(function(location){
            common.post(common.api.bag.event,{
                eventId:that.state.eventInfo.id,
                title:that.state.eventInfo.title,
                message:'',
                ...location,
            }).then(res => {
                Toast.show('发表成功', {
                        duration: Toast.durations.SHORT,
                        position: Toast.positions.BOTTOM,
                        onHidden: () => {
                            that.props.navigation.goBack();
                        }
                    }
                );
            }).catch(err => {
                Toast.show('发表失败', {
                        duration: Toast.durations.LONG,
                        position: Toast.positions.BOTTOM
                    }
                );
            }).finally(suc =>{
                that.setState({isDisable:false});
            });
        });
    }
    componentDidMount(){
        this.getEventDetail();
    }
    getEventDetail(){ // 获取活动信息详情
        let that = this;
        that.setState({ isDisable:true });
        let { params } = this.props.navigation.state;
        if(params.eventId){
            that.postDetail(params.eventId,{longitude:0,latitude:0});
        }else {
            common.getLocation(function (location) {
                that.postDetail(0, location);
            });
        }
    }
    postDetail(id, location){
        let that  = this;
        common.get(common.api.event.detail,{ id:id, ...location }).then(res =>{
            res.cover = { uri:res.cover };
            that.setState({ eventInfo:res });
        }).catch(err => {

        }).finally(succ=>{
            that.setState({ isDisable:false });
        });
    }
    payVideo(){
        this.props.navigation.navigate('VideoPlayer',{ url: this.state.eventInfo.file });
    }
    render(){
        return(
            <View style={styles.container}>
                <PHead onRightEvent={this.close.bind(this)} title='留下点特别的！' rightText="关闭"></PHead>
                <ScrollView style={styles.container}>
                    <View style={[styles.container,styles.flexStart]}>
                        <View style={styles.coverImage}>
                            <Image resizeMode={Image.resizeMode.cover}
                                   style={styles.coverImage}
                                   source={this.state.eventInfo.cover}>
                                <View style={styles.coverLayout}>
                                    <TouchableOpacity disabled={this.state.isDisable} activeOpacity={.7} onPress={this.payVideo.bind(this)}><Image source={require('../../icon/btn/btn_play_big.png')}/></TouchableOpacity>
                                </View>
                            </Image>
                        </View>
                        <View style={styles.textContentWrap}>
                            <View>
                                <Text style={styles.titleText}>{this.state.eventInfo.title}</Text>
                            </View>
                            <View style={styles.addressWrap}>
                                <Image source={require('../../icon/common/icon_map.png')}></Image>
                                <Text style={styles.addressTx}>{ this.state.eventInfo.address }</Text>
                            </View>
                            <View>
                                <Text style={styles.contentTx}>
                                    { this.state.eventInfo.content }
                                </Text>
                            </View>
                            <View>
                                {renderIf(this.state.eventInfo.state == 2)(
                                    <TouchableOpacity activeOpacity={.7} disabled={this.state.isDisable} onPress={this.payEvent.bind(this)} style={styles.payButton}>
                                        <Text style={styles.payButtonText}>微信安全支付</Text>
                                    </TouchableOpacity>
                                )}
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:'column',
        backgroundColor:'#fff',
    },
    spaceBetween:{
        justifyContent:'space-between',
    },
    flexStart:{
        justifyContent:'flex-start',
    },
    textContentWrap:{
        marginTop:10,
        paddingLeft:15,
        paddingRight:15,
    },
    coverImage:{
        height:280,
        width:WINDOW_DIMENSIONS.width,
    },
    coverLayout:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'rgba(0,0,0,.2)',
    },
    titleText:{
        fontSize:16,
        color:'#5F6484',
    },
    addressWrap:{
        paddingTop:10,
        paddingBottom:10,
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems:'center',
    },
    addressTx:{
        color:'#B0B2C2',
        fontSize:14,
        marginLeft:10,
    },
    contentTx:{
        color:'#B0B2C2',
        fontSize:14,
        paddingTop:10,
    },
    payButton:{
        marginTop:38,
        marginBottom:15,
        backgroundColor:'rgba(82,211,100,1)',
        paddingTop:14,
        paddingBottom:14,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:4,
    },
    payButtonText:{
        color:'#FFFFFF',
        fontSize:18,
    },
});